<!DOCTYPE html>
<html lang="en"  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>用户可视化</title>
    <link href="Ly-admin-Iframe/css/bootstrap.min.css" rel="stylesheet">
    <link href="Ly-admin-Iframe/css/materialdesignicons.min.css" rel="stylesheet">
    <link href="Ly-admin-Iframe/css/animate.css" rel="stylesheet">
    <link href="Ly-admin-Iframe/css/style.min.css" rel="stylesheet">
    <link href="Ly-admin-Iframe/js/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <script>
        if (document.referrer === ''){
            location='/admin';
        }
    </script>
</head>
<body>
<div class="container-fluid p-t-15">
    <div class="row">
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h4>用户分布柱状图</h4>
                </div>
                <div class="card-body">
                    <canvas class="js-chartjs-bars"></canvas>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h4>用户分布线形图</h4>
                </div>
                <div class="card-body">
                    <canvas class="js-chartjs-lines"></canvas>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="Ly-admin-Iframe/js/jquery.min.js"></script>
<script type="text/javascript" src="Ly-admin-Iframe/js/bootstrap.min.js"></script>
<script type="text/javascript" src="Ly-admin-Iframe/js/main.min.js"></script>

<!--图表插件-->
<script type="text/javascript" src="Ly-admin-Iframe/js/Chart.js"></script>
<script th:inline="javascript">
    $(document).ready(function(e) {
        var $dashChartBarsCnt  = jQuery( '.js-chartjs-bars' )[0].getContext( '2d' ),
            $dashChartLinesCnt = jQuery( '.js-chartjs-lines' )[0].getContext( '2d' );

        var $dashChartBarsData = {
            labels: [[${address}]],
            datasets: [
                {
                    label: '用户数',
                    borderWidth: 1,
                    borderColor: 'rgba(0,0,0,0)',
                    backgroundColor: 'rgba(51,202,185,0.5)',
                    hoverBackgroundColor: "rgba(51,202,185,0.7)",
                    hoverBorderColor: "rgba(0,0,0,0)",
                    data: [[${num}]]
                }
            ]
        };
        var $dashChartLinesData = {
            labels:[[${address}]],
            datasets: [
                {
                    label: '用户数',
                    data: [[${num}]],
                    borderColor: '#358ed7',
                    backgroundColor: 'rgba(53, 142, 215, 0.175)',
                    borderWidth: 1,
                    fill: false,
                    lineTension: 0.5
                }
            ]
        };

        new Chart($dashChartBarsCnt, {
            type: 'bar',
            data: $dashChartBarsData
        });

        var myLineChart = new Chart($dashChartLinesCnt, {
            type: 'line',
            data: $dashChartLinesData,
        });
    });
</script>
</body>
</html>